<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>个人中心</title>
<script type="text/javascript" src="js/e.js"></script>
<style type="text/css">
html,body,div,a,img,h1,h2,h3,h4,h5,h6,ul,li,p,span,form,input,textarea{
	margin:0;
	padding:0;
	border:none;
	list-style-image: none;
	list-style-type: none;
	text-decoration: none;
	color: #330000;
	outline: none;
	font-size: 12px;
	hide-focus: expression(this.hideFocus=true);
}
ul,li,i,span,p{
	display: block;
}

body{
	background-image: url("img/11.jpg");
	background-attachment : fixed;
}


/*导航*/
.topNav{
	width: 100%;
	background-color: #333;/*#607339*/
	border-bottom: 1px solid #cccccc;
	filter:alpha(opacity=80);
	opacity: 0.8;
	position: fixed;
}
.navMain{
	width: 1000px;
	height: 45px;
	margin-left: auto;
	margin-right: auto;
	z-index: 999;
}
.navMain .logo{
	display: block;
	float: left;
	width: 130px;
	height: 45px;
	font-size: 0px;
	background: url(img/logo.png) no-repeat 0px 5px;
}
.navMain ul{
	float: right;
	width: 860px;
	height: 45px;
}
.navMain li{
	float: left;
	width: 80px;
	height: 45px;
	margin-left: 10px;
	padding-left: 5px;
	line-height: 45px;
	color: #fff;
	cursor: pointer;
	position: relative;
}
.navMain li:hover{
	background-color: #748C43;
}
.navCurrent{
	background-color: #748C43;
}
.navMain .liRight{
	float: right;
	width: 56px;
} 
.navMain li i{
	width: 20px;
	height: 20px;
	margin-top: 12px;
	margin-right: 6px; 
	float: left;
	background-image: url("img/dh.png");
	background-repeat: no-repeat;
}
.hover{background-position: -738px -98px;}
.index{background-position: -738px -148px;}
.fans{background-position: -738px -123px;}
.md{background-position: -763px -173px;}
.setup{background-position: -763px -148px;}
.logout{background-position: -763px -123px;}
.liRight a{
	display: block;
	float: left;
	width: 100%;
	height: 30px;
	line-height: 30px;
	text-align: center;
	color: #fff;
}
.liRight a:hover{
	background-color: #282828;
}
.fansPanel{
	width: 80px;
	height: 90px;
	display: none;
}
.mdPanel{
	width: 80px;
	height: 150px;
	display: none;
}
.setupPanel{
	width: 80px;
	height: 90px;
	display: none;
}
/*导航结束*/

/*主体开始*/
#main{
	padding-top: 50px;
}
.container{
	width: 1000px;
	height: 1600px;
	/*background-color: #fff;*/
	margin-left: auto;
	margin-right: auto;
}
.userTop{
	width: 100%;
	height: 121px;
	padding-top: 89px;
	/*background-color: #333;*/
}
.userProfile{
	width: 121px;
	height: 121px;
	float: left;
	/*background-color: #653245;*/
}
.userProfile img{
	width: 115px;
	height: 115px;
	border-radius:65px;
	border: 3px solid #fff;
}
.userData{
	width: 868px;
	height: 121px;
	float: right;
	/*background-color: #654566;*/
}
.DataA{
	width: 100%;
	height: 30px;
	margin-top: 50px;
	/*background-color: #121235;*/
}
.DataA .uesrName{
	float: left;
	margin-right: 10px;
	height: 20px;
	line-height: 20px;
	/*background-color: #555;*/
	font-size: 16px;
	font-weight: bold;
}
.DataA .uesrGradePic{
	float: left;
	width: 20px;
	height: 20px;
	background-color: #899854;
	background: url("img/base.png") no-repeat -33px 0px;
}
.DataB{
	width: 100%;
	height: 30px;
	margin-top: 6px;
	/*background-color: #897562;*/
}
.DataB .uesrRecord{
	float: left;
	height: 25px;
	line-height: 25px;
	margin-right: 10px;
	color: #fff;
	border-radius:3px;
	background-color: #333;/*#897562*/
	filter:alpha(opacity=50);
	opacity: 0.5;
	padding-left: 6px;
	padding-right: 6px;
	font-family: "新宋体";
}


</style>
</head>
<body>

<!--导航开始-->
<div class="topNav">
	<div class="navMain">
		<a href="" class="logo">151美图网</a>
		<ul id="navUl">
			<li class="navCurrent"><i class="hover"></i>个人中心</li>
			<li><i class="index"></i><a href="" style="color: #fff;">我的主页</a></li>
			<li class="liRight"><i class="logout"></i>退出</li>
			<li class="liRight"><i class="setup"></i>设置
				<div class="setupPanel">
					<a href="">修改资料</a>
					<a href="">主页排版</a>
					<a href="">权限设置</a>
				</div>
			</li>
			<li class="liRight"><i class="md"></i>消息
				<div class="mdPanel">
					<a href="">系统通知</a>
					<a href="">最新私信</a>
					<a href="">最新留言</a>
					<a href="">最新评论</a>
					<a href="">新增鲜花</a>
				</div>
			</li>
			<li class="liRight"><i class="fans"></i>粉丝
				<div class="fansPanel">
					<a href="">我的粉丝</a>
					<a href="">我关注的</a>
					<a href="">交友广场</a>
				</div>
			</li>	
		</ul>
	</div>
</div>
<!--导航结束-->


<!--主体开始-->
<div id="main">
	<!--<div id="transparent">背景透明度控制</div>-->
	<div class="container">
		<!--用户基本信息-->
		<div class="userTop">
			<div class="userProfile">
				<img src="img/n1.jpg" id="userAvatar"/>
			</div>
			<div class="userData">
				<div class="DataA">
					<p class="uesrName">鲁智深</p>
					<p class="uesrGradePic"></p>
				</div>
				<div class="DataB">
					<p class="uesrRecord">粉丝：6235</p> 
					<p class="uesrRecord">关注：52</p>
					<p class="uesrRecord">鲜花：8941232</p>
					<p class="uesrRecord">今日访客：53264</p>
					<p class="uesrRecord">总访客：9889412323</p>
				</div>
			</div>
		</div>
		<!--用户基本信息结束-->

		<!--时光轴开始-->
		<div class="">5656</div>
		<!--时光轴结束-->
	</div>
</div>
<!--主体结束-->


</body>
<script type="text/javascript">


/*导航*/
var navUl=e('#navUl li');
navUl.mouseover(function(){
	var n=this.getElementsByTagName('div')[0];
	n.style.display='block';
	n.style.top='45px';
	n.style.left='0px';
	n.style.backgroundColor='#3D3D3D';
	n.style.position='absolute';
	navUl.mouseout(function(){
		n.style.display='none';
	});
});

// 当滚动条移动
window.onscroll=function(){

}

// 设置主体背景高度
//var y=document.documentElement.clientHeight;  // 浏览器高度
//e('#main').css('height',(y-46)+'px');
//e('#transparent').css('height',(y-46)+'px');



</script>
</html>
